import React, { createContext, useContext, useState, useCallback, ReactNode, useRef, useEffect } from 'react';
import { cn } from '../../utils/cn';

// 定义卡片切换的上下文类型
interface CardCarouselContextType {
  currentIndex: number;
  setCurrentIndex: (index: number) => void;
  data: any[];
  visibleCount: number;
  cardSpacing: number;
  cardWidth: number;
  containerHeight: number;
  setContainerHeight: (height: number) => void;
}

// 创建上下文
const CardCarouselContext = createContext<CardCarouselContextType | null>(null);

// 自定义Hook用于使用上下文
export const useCardCarousel = () => {
  const context = useContext(CardCarouselContext);
  if (!context) {
    throw new Error('useCardCarousel must be used within a CardCarousel');
  }
  return context;
};

// 卡片切换组件Props类型
export interface CardCarouselProps {
  /**
   * 卡片数据
   */
  data: any[];
  /**
   * 可见卡片数量
   * 仅支持奇数，若传入偶数，则自动向上取整
   * @default 3
   */
  visibleCount?: number;
  /**
   * 默认选中卡片索引
   * @default 0
   */
  defaultIndex?: number;
  /**
   * 子组件
   */
  children: ReactNode;
  /**
   * 类名
   */
  className?: string;
  /**
   * 卡片间距（像素）
   * 基于卡片宽度的偏移量：
   * - 0: 卡片刚好并排展示（间距等于卡片宽度）
   * - 负数: 卡片重叠展示（间距小于卡片宽度）
   * - 正数: 卡片间有更大间距（间距大于卡片宽度）
   * @default 0
   */
  cardSpacing?: number;
  /**
   * 卡片宽度（像素）
   * 用于计算卡片间距和位置的基础宽度
   * @default 120
   */
  cardWidth?: number;
}

// 卡片组件Props类型
export interface CardProps {
  /**
   * 卡片索引
   */
  index: number;
  /**
   * 子组件
   */
  children: ReactNode;
  /**
   * 类名
   */
  className?: string;
}

// 主容器组件
export const CardCarousel: React.FC<CardCarouselProps> = ({
  data,
  visibleCount = 3,
  defaultIndex = 0,
  children,
  className = '',
  cardSpacing = 0,
  cardWidth = 120,
}) => {
  // 确保visibleCount至少为1
  const actualVisibleCount = isNaN(visibleCount) ? 1 : Math.max(1, visibleCount);
  
  // 确保defaultIndex在有效范围内
  const initialIndex = isNaN(defaultIndex) ? 0 : Math.max(0, Math.min(defaultIndex, data.length - 1));
  
  const [currentIndex, setCurrentIndex] = useState(initialIndex);
  const [containerHeight, setContainerHeight] = useState(0);

  const handleSetCurrentIndex = useCallback((index: number) => {
    if (index >= 0 && index < data.length) {
      setCurrentIndex(index);
    }
  }, [data.length]);

  const contextValue: CardCarouselContextType = {
    currentIndex,
    setCurrentIndex: handleSetCurrentIndex,
    data,
    visibleCount: actualVisibleCount,
    cardSpacing,
    cardWidth,
    containerHeight,
    setContainerHeight,
  };

  return (
    <CardCarouselContext.Provider value={contextValue}>
      <div 
        className={cn('relative flex items-center justify-center w-full overflow-hidden', className)}
        style={{ height: containerHeight > 0 ? `${containerHeight}px` : 'auto' }}
      >
        {children}
      </div>
    </CardCarouselContext.Provider>
  );
};

// 卡片组件
export const Card: React.FC<CardProps> = ({ index, children, className = '' }) => {
  const { currentIndex, setCurrentIndex, data, visibleCount, cardSpacing, cardWidth, setContainerHeight } = useCardCarousel();
  const cardRef = useRef<HTMLDivElement>(null);
  
  if (index < 0 || index >= data.length) {
    return null;
  }

  // 计算卡片在可见区域中的位置
  const getCardPosition = () => {
    const centerIndex = currentIndex;
    const halfVisible = Math.floor(visibleCount / 2);
    
    // 计算相对于中心的位置
    let relativePosition = index - centerIndex;
    
    // 处理循环逻辑
    if (relativePosition > halfVisible) {
      relativePosition -= data.length;
    } else if (relativePosition < -halfVisible) {
      relativePosition += data.length;
    }
    
    return relativePosition;
  };

  const position = getCardPosition();
  const isVisible = Math.abs(position) <= Math.floor(visibleCount / 2);
  const isActive = position === 0;

  // 检测卡片高度并更新容器高度
  useEffect(() => {
    if (cardRef.current && isVisible) {
      const cardHeight = cardRef.current.offsetHeight;
      // 添加一些内边距以确保卡片不会被裁剪
      setContainerHeight(cardHeight + 20);
    }
  }, [isVisible, setContainerHeight]);
  
  // 计算样式
  const getCardStyle = () => {
    if (!isVisible) {
      return {
        opacity: 0,
        transform: 'scale(0.8) translateX(0)',
        zIndex: 0,
      };
    }

    const scale = isActive ? 1 : 0.85;
    const translateX = position * (cardWidth + cardSpacing);
    const zIndex = isActive ? 10 : 5 - Math.abs(position);

    // 根据位置设置不同的缩放源点
    let transformOrigin = 'center center';
    if (!isActive) {
      if (position > 0) {
        // 右侧卡片从左侧中间缩放
        transformOrigin = 'left center';
      } else if (position < 0) {
        // 左侧卡片从右侧中间缩放
        transformOrigin = 'right center';
      }
    }

    return {
      transform: `translateX(${translateX}px) scale(${scale})`,
      transformOrigin,
      zIndex,
      transition: 'all 0.3s ease-in-out',
    };
  };

  const handleClick = () => {
    if (isVisible && !isActive) {
      setCurrentIndex(index);
    }
  };

  return (
    <div
      ref={cardRef}
      className={cn(
        'absolute cursor-pointer select-none transform-gpu will-change-transform',
        isActive ? 'cursor-default card-carousel-active' : 'card-carousel-inactive hover:cursor-pointer',
        className
      )}
      style={getCardStyle()}
      onClick={handleClick}
    >
      {children}
    </div>
  );
};
